$(document).ready(function()
	{
		//Obtenemos nuestro lienzo e indicamos plano
		var lienzo=document.getElementById("graficas");
		var ctx=lienzo.getContext("2d");
		Poligon();

		$("#gpoligono").click(function(){
			Poligon();
		});
		$("#gbarra").click(function(){
			ctx.clearRect(0,0,lienzo.width,lienzo.height);
			ctx.fillStyle="black";
			ctx.font="bold 15px sans-serif";
			ctx.fillText("'Puntos sumados líder Campeonato'",lienzo.width/3,20);
                        ctx.fillText("'Sebatian Vettel'",lienzo.width/3+55,40);
			//primeras dos barras
                        ctx.font="bold 12px sans-serif";
			ctx.beginPath();
			ctx.lineWidth=2;
			ctx.fillStyle="#9FFBFF";
			ctx.moveTo(30,lienzo.height);
			ctx.lineTo(30,lienzo.height/2);
			ctx.lineTo(60,lienzo.height/2);
			ctx.lineTo(60,lienzo.height);
			ctx.strokeStyle="blue";
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="black";
			ctx.font="bold 12px sans-serif";
			ctx.fillText("'Enero-10 Febrero-8'",18,(lienzo.height/2)-15);

			ctx.beginPath();
			ctx.fillStyle="#FF6EDC";
			ctx.moveTo(60,lienzo.height);
			ctx.lineTo(60,(lienzo.height/2)+30);
			ctx.lineTo(90,(lienzo.height/2)+30);
			ctx.lineTo(90,lienzo.height);
			ctx.fill();
			ctx.stroke();
			//Segundo par de barras
			ctx.beginPath();
			ctx.fillStyle="#9FFBFF";
			ctx.moveTo(120,lienzo.height);
			ctx.lineTo(120,(lienzo.height/2)-80);
			ctx.lineTo(150,(lienzo.height/2)-80);
			ctx.lineTo(150,lienzo.height);
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="black";
			ctx.font="bold 12px sans-serif";
			ctx.fillText("'Marzo-15 Abril-12'",115,(lienzo.height/2)-95);

			ctx.beginPath();
			ctx.fillStyle="#FF6EDC";
			ctx.moveTo(150,lienzo.height);
			ctx.lineTo(150,(lienzo.height/2)-50);
			ctx.lineTo(180,(lienzo.height/2)-50);
			ctx.lineTo(180,lienzo.height);
			ctx.fill();
			ctx.stroke();

			//Tercer par de barras
			ctx.beginPath();
			ctx.moveTo(210,lienzo.height);
			ctx.lineTo(210,(lienzo.height/2)+50);
			ctx.lineTo(240,(lienzo.height/2)+50);
			ctx.lineTo(240,lienzo.height);
			ctx.fill();
			ctx.stroke();
			ctx.fillStyle="black";
			ctx.font="bold 12px sans-serif";
			ctx.fillText("'Junio-5 Julio-9'",215,(lienzo.height/2)-40);
			ctx.beginPath();
			ctx.fillStyle="#FF6EDC";
			ctx.moveTo(240,lienzo.height);
			ctx.lineTo(240,(lienzo.height/2)-30);
			ctx.lineTo(270,(lienzo.height/2)-30);
			ctx.lineTo(270,lienzo.height);
			ctx.fill();
			ctx.stroke();			

		});
		$("#gpastel").click(function(){
			ctx.clearRect(0,0,lienzo.width,lienzo.height);
			//Circulo general
			ctx.beginPath();
			ctx.lineWidth=4;
			ctx.strokeStyle="#6EFFA9";
			ctx.arc(lienzo.width/2,lienzo.height/2,100,0,Math.PI*2);
			ctx.stroke();

			//Indicador pastel 
			ctx.beginPath();
			ctx.lineWidth=1;
			ctx.fillStyle="#46B0D6";
			ctx.arc(lienzo.width/2,lienzo.height/2,99,Math.PI,Math.PI*2,false);
			ctx.stroke();
			ctx.fill();


			//medio circulo morado
			ctx.beginPath();
			ctx.lineWidth=1;
			ctx.fillStyle="#E453CC";
			ctx.arc(lienzo.width/2,lienzo.height/2,99,Math.PI*0.75,Math.PI*1.75,false);
			ctx.stroke();
			ctx.fill();

			//indicador grafica pastel amarillo
			ctx.beginPath();
			ctx.lineWidth=1;
			ctx.fillStyle="#FFFD72";
			ctx.arc(lienzo.width/2,lienzo.height/2,99,Math.PI*0.25,Math.PI*1.25,false);
			ctx.stroke();
			ctx.fill();

			//indicador pastel rojo
			ctx.beginPath();
			ctx.lineWidth=1;
			ctx.fillStyle="#FF855F";
			ctx.arc(lienzo.width/2,lienzo.height/2,99,0,Math.PI);
			ctx.stroke();
			ctx.fill();
			ctx.fillStyle="black";
			ctx.font="bold 12px sans-serif";
			ctx.fillText("'Puntos Octubre: 40'",(lienzo.width/3)+15,
				(lienzo.height/2+40));
			ctx.fillText("'Sep 20'",lienzo.width/3+60,
				(lienzo.height/2-50));
			

			

			
		});		


	});
	function Poligon()
	{
		var lienzo=document.getElementById("graficas");
		var ctx=lienzo.getContext("2d");
		//Primer línea-Azul
		ctx.clearRect(0,0,lienzo.width,lienzo.height);	
		ctx.beginPath();
		ctx.lineWidth=5;
		ctx.fillStyle="white";
		ctx.font="bold 12px sans-serif";
		ctx.moveTo(0,lienzo.height);
		ctx.lineTo(100,(lienzo.height/2));
		ctx.lineTo(150,(lienzo.height/2));
		ctx.lineTo(180,(lienzo.height/2)-30);
		ctx.lineTo(250,(lienzo.height/2)+90);
		ctx.fillText("'Lewis Hamilton'",215,(lienzo.height/2)+105);
                ctx.font="bold 16px sans-serif";
                ctx.fillText("'Tendencia de efectivad'",lienzo.width/2-30,20);
		ctx.strokeStyle="#50A7DC";
		ctx.stroke();

		//Segunda línea-Verde
		ctx.beginPath();
		ctx.fillStyle="white";
		ctx.font="bold 12px sans-serif";
		ctx.moveTo(0,500);
		ctx.lineTo(100,200);
		ctx.lineTo(150,250);
		ctx.lineTo(250,100);
		ctx.lineTo(300,100);
		ctx.lineTo(325,175);
		ctx.lineTo(lienzo.width-5,10);
		ctx.fillText("'Sebastian Vettel'",lienzo.width-140,40);
		ctx.strokeStyle="Green";
		ctx.stroke();

		//Tercer Línea-Morada
		ctx.beginPath();
		ctx.fillStyle="#white";
		ctx.font="bold 12px sans-serif";
		ctx.moveTo(0,(lienzo.height/2));
		ctx.lineTo(80,(lienzo.height/2)+60);
		ctx.lineTo(110,(lienzo.height/2)-90);
		ctx.lineTo(190,(lienzo.height/2)-90);
		ctx.lineTo(250,(lienzo.height/2)+40);
		ctx.fillText("'Fernando Alonso'",240,(lienzo.height/2)+55);
		ctx.strokeStyle="#9841AE";
		ctx.stroke();
	}

